<!--
 * @Author: JiraiyaChen 979526234@qq.com
 * @Date: 2024-08-14 09:16:33
 * @LastEditors: JiraiyaChen 979526234@qq.com
 * @LastEditTime: 2024-08-15 14:45:44
 * @Description: 通用表格

-->

<template>
  <div class="common-card">
    <div v-if="filterFormItem.length !== 0" class="flex mb-3 search-box">
      <ClForm
        class="filter-box"
        ref="refForm"
        filter-box
        label-width="auto"
        :form-item="filterFormItem"
        :inline="true"
        @sent-form-data="onSentFormData"
      />
      <div class="filter-btn">
        <el-button type="primary" :loading="loadingTable" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
        <slot
          name="opt-btn"
          :multiple-selection="multipleSelection"
          :multiple-selection-id="multipleSelectionId"
          :filter-data="refForm?.formData"
        />
      </div>
    </div>
    <div class="flex justify-between items-center" :class="{ 'mb-5': tableName }">
      <div v-if="tableName" class="flex items-center gap2">
        <span class="table-name">{{ tableName }}</span>
      </div>
      <slot name="table-name-option" />
    </div>
    <div class="row2 mb-3">
      <el-table
        id="cl-table"
        ref="refTable"
        v-loading="loadingTable"
        class="cl-table"
        table-layout="auto"
        tooltip-effect="light"
        :data="realTableData"
        style="width: 100%"
        :max-height="maxHeight"
        :highlight-current-row="highlight"
        :span-method="spanMethod"
        header-cell-class-name="my-header-cell-row"
        cell-class-name="my-cell-row"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="showIndex" type="index" />
        <el-table-column v-if="showSelection" type="selection" width="55" />
        <el-table-column
          v-for="item in columnList"
          :key="item"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :show-overflow-tooltip="item.isTooltip ?? true"
        >
          <template v-if="item.component" #default="{ row }">
            <component :is="item.component" :row-data="row" :data-key="item.compKey" :column="item" />
          </template>
        </el-table-column>
        <slot name="column" />
      </el-table>
    </div>
    <div v-if="pageTotal !== 0" class="pagination-box flex justify-end">
      <el-pagination
        v-if="showPage"
        v-model:current-page="elPage.pageNo"
        v-model:page-size="elPage.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="pageTotal"
        :small="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { type PropType } from 'vue';
import { ColumnProps, FilterFormItem } from "./type";
const props = defineProps({
  // 表格数据来源
  tableData: {
    type: [Array, Function],
    required: true
  },
  // 表格 筛选
  filterFormItem: {
    type: Array as PropType<FilterFormItem[]>,
    default: () => []
  },
  // 列
  columnList: {
    type: Array as PropType<ColumnProps[]>,
    default: () => []
  },
  showPage: {
    type: Boolean,
    default: true
  },
  maxHeight: {
    type: Number,
  },
  highlight: {
    type: Boolean,
    default: false
  },

  spanMethod: {
    type: Function
  },

  showSelection: {
    type: Boolean,
    default: false
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  tableName: {
    type: String,
  },

})
// 分页
const pageTotal = ref(0)
const elPage = ref({ pageNo: 1, pageSize: 10 })
const handleSizeChange = val => {
  elPage.value.pageSize = val
  initTable()
}
const handleCurrentChange = val => {
  elPage.value.pageNo = val
  initTable()
}
// 筛选框
const refForm = ref<any>(null)
const onSentFormData = (_) => {
  initTable()
}
onMounted(() => {
  initTable()
})
const onSearch = () => {
  initTable()
}
const onReset = () => {
  props.filterFormItem.map((m) => {
    m.value = ''
  })
}

const refTable = ref<any>(null)

// 多选
const multipleSelection = ref([])
const multipleSelectionId = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  multipleSelectionId.value = val.map((m) => m.id)

}
// 表格数据
const loadingTable = ref(false)
const realTableData = ref<any>([])
const initTable = async () => {
  try {
    console.log('初始化表格');
    if (typeof props.tableData === 'function') {
      const filterData = refForm.value?.formData
      loadingTable.value = true
      let tableRequest = {}
      if (props.showPage) {
        tableRequest = { ...elPage.value, ...filterData }
      } else {
        tableRequest = filterData
      }
      const data = await props.tableData(tableRequest)
      const { records, rows, total } = data
      realTableData.value = rows ?? records ?? data

      pageTotal.value = total ?? 0
      loadingTable.value = false
    } else {
      realTableData.value = props.tableData
      pageTotal.value = props.tableData.length
    }

  } catch (error) {
    console.log('🐷 🐽 initTable 🐽 error👉👉👉', error)
    loadingTable.value = false
  }
}
defineExpose({
  initTable,
  refForm,
})
</script>

<style scoped>
@import url('./index.scss');
</style>
